<template>
	<view class="home">
		
		<scroll-view scroll-x class="navscroll"  >
			<view class="item" :class="index === navIndex ? 'active':'' " v-for="(item,index) in navArr" :key="item.id" @click="clickNav(index,item.id)" >
				{{item.classname}}
			</view>
		</scroll-view>
		
		<view class="content">
			<view class="row" v-for="(item,index) in newsArr" :key="item.id">
				<newsbox :item="item" @click.native='goDetail(item)' ></newsbox>
			</view>
		</view>
		
		<view class="noData" v-if="newsArr.length === 0">
			<image src="../../static/images/nodata.png" mode=""></image>
		</view>
		
		<view class="loading">
			<view v-if="loading === 1">
				数据加载中
			</view>
			<view v-if="loading === 2">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				navIndex:0,
				navArr:[],
				newsArr:[],
				currentPage:1,
				loading:0, // 0默认 1数据加载中 2没有更多了
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		onReachBottom(){
			if(this.loading === 2) return
			this.currentPage ++
			this.loading = 1
			this.getNewsData()
		},
		methods: {
			// 导航栏点击切换
			clickNav(index,id){
				this.navIndex = index
				this.currentPage = 1
				this.newsArr = []
				this.loading = 0
				this.getNewsData(id)
			},
			
			// 获取导航栏数据
			getNavData(){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success:res=>{
						this.navArr = res.data
					}
					
				})
			},
			
			// 跳转新闻详情页面
			goDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			
			//获取新闻列表数据
			getNewsData(id=50){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data:{
						cid:id,
						page:this.currentPage
					},
					success:res=>{
						if(res.data.length === 0){
							this.loading = 2
						}
						this.newsArr = [...this.newsArr,...res.data]
					}
				})
			}
			
			//
			
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll{
		height: 100rpx;
		background: #F7F8FA;
		white-space: nowrap;
		position: fixed;
		left: 0;
		top: var(--window-top);
		z-index: 10;
		/deep/	::-webkit-scrollbar{
			width: 4rpx !important;
			height: 1rpx  !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		.item{
			display: inline-block;
			font-size: 40rpx;
			line-height: 100rpx;
			padding: 0 30rpx;
			&.active{
				color: #31c27c;
			}
		}
	}
	.content{
		padding: 30rpx;
		padding-top:130rpx;
		.row{
			border-bottom: 1px dotted #efefef;
			padding: 15rpx 0rpx;
		}
	}
	.noData{

		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 360rpx;
		}
	}
	.loading{
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
</style>
